<template>
  <div class="scroll">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide><img src="static/images/shouji-1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="static/images/shouji-2.png" alt="" /></swiper-slide>
      <swiper-slide><img src="static/images/shouji-3.png" alt="" /></swiper-slide>
      <swiper-slide><img src="static/images/shouji-4.png" alt="" /></swiper-slide>
      <!-- Optional controls -->
     <div class="swiper-pagination"  slot="pagination"></div>
     <!--   <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-black" slot="button-next"></div> -->
      <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
    </swiper> 
  </div>
</template>

<script>

import Vue from "vue";

//轮播图插件 
import VueAwesomeSwiper from "vue-awesome-swiper";
//  需要样式


import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import "swiper/dist/css/swiper.css";


export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        //   // ...
          autoplay:3000,
        //   direction : 'vertical',
          grabCursor:true,
          setWrapperSize:true,
          sutoHeight:true,
          pagination: ".swiper-pagination", // // 如果需要分页器
          paginationClickable:true,
          //  nextButton: ".swiper-button-next",// // 如果需要前进后退按钮
          // prevButton: ".swiper-button-prev",
        //    scrollbar: ".swiper-scrollbar", // // 如果需要滚动条
          mousewheelControl:true,
          observeParents:true,
        //如果自行设计了插件，那么插件的一些配置相关的参数，也应该出现在这个对象中，如下
          debugger:true,
          //swiper各种回调函数也可以出现在这个对象夏侯昂，和swiper官方一样
          onTransitionStart(swiper){
              console.log(swiper)
          },
          autoplay: 5000,
          initialSlide: 1,
          pagination:{
            el:".swiper-pagination"
          },
          autoplay:{
            delay:1500,
            disableOnInteraction:false
          },
          loop:true

      },
    
    };
  },
  
  
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}

.scroll{
 
  width:100%;
  position: absolute;
  height: pxtovw(250); 
  background: #aaa;
}


h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
 
}
li {
  display: inline-block;
  // margin: pxtovw(0) pxtovw(10);
}
a {
  color: #42b983;
}
.swiper-slide{
  width: 100%;
   margin-top:pxtovw(40); 

  height:pxtovw(200);
 img{
   padding-top:pxtovw(10); 
  height:pxtovw(200);
  width:100%;

  }
  
  
}

  

</style>
